<template>
  <el-form :model="formData" ref="form" label-position="right" label-width="80px" size="medium" @submit.prevent>
    <el-row type="flex" justify="space-between" align="top" :gutter="15" style="margin-right: 1px;margin-bottom:12px">
      <span style="font-size:12px;color:#ffc0cb">说明：目前支持学科和关键字条件筛选</span>
      <el-button type="success" :icon="Edit" @click="$router.push({ path: 'new' })">新增试题</el-button>
    </el-row>
    <el-row type="flex" justify="start" align="top" :gutter="15">
      <el-col :span="6" class="grid-cell">
        <el-form-item label="学科" prop="subject">
          <el-select v-model="formData.subject" class="full-width-input" clearable :style="{ width: '100%' }"
            @change="subjectChange">
            <el-option v-for="(item, index) in subjectOptions" :key="index" :value="item.value" :label="item.label"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="二级目录" prop="second">
          <el-select v-model="formData.second" class="full-width-input" clearable :style="{ width: '100%' }">
            <el-option v-for="(item, index) in secondOptions" :key="index" :value="item.value" :label="item.label"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="标签" prop="tags">
          <el-select v-model="formData.tags" class="full-width-input" clearable :style="{ width: '100%' }">
            <el-option v-for="(item, index) in tagsOptions" :key="index" :value="item.value" :label="item.label"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="关键字" prop="keyWords">
          <el-input v-model="formData.keyWords" type="text" placeholder="请输入关键字" clearable :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="start" align="top" :gutter="15">
      <el-col :span="6" class="grid-cell">
        <el-form-item label="试题类型" prop="questionsType">
          <el-select v-model="formData.questionsType" class="full-width-input" clearable :style="{ width: '100%' }">
            <el-option v-for="(item, index) in questionsTypeOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="formData.difficulty" class="full-width-input" clearable :style="{ width: '100%' }">
            <el-option v-for="(item, index) in difficultyOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="方向" prop="direction">
          <el-select v-model="formData.direction" class="full-width-input" clearable :style="{ width: '100%' }">
            <el-option v-for="(item, index) in directionOptions" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="录入人" prop="enterPeople">
          <el-select v-model="formData.enterPeople" class="full-width-input" clearable :style="{ width: '100%' }">
            <el-option v-for="(item, index) in enterPeopleOptions" :key="index" :value="item" :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="start" align="top" :gutter="15">
      <el-col :span="6" class="grid-cell">
        <el-form-item label="题目备注" prop="topicRemarks">
          <el-input v-model="formData.topicRemarks" type="text" clearable :style="{ width: '100%' }"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="企业简称" prop="simpleCall">
          <el-input v-model="formData.simpleCall" type="text" clearable :style="{ width: '100%' }"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell" style="display: flex;">
        <el-form-item label="城市" prop="city">
          <el-select v-model="formData.city" class="full-width-input" clearable style="width:25%" @change="cityChange">
            <el-option v-for="(item, index) in cityOptions" :key="index" :value="item" :disabled="item.disabled">
            </el-option>
          </el-select>
          <el-select v-model="formData.lastCity" class="full-width-input" clearable style="width:25%">
            <el-option v-for="(item, index) in lastCityOptions" :key="index" :value="item" :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <div style="float:right;">
        <el-button @click="resetForm">清除</el-button>
        <el-button type="primary" @click="submitForm">搜索</el-button>
      </div>
      </el-col>
    </el-row>

  </el-form>

</template>

<script>
import { Edit } from '@element-plus/icons-vue'
import { simple } from '@/api/hmmm/subjects.js'
import { choice } from '@/api/hmmm/questions.js'
import { simple as simpleSecond } from '@/api/hmmm/directorys.js'
import { simple as simpleTags } from '@/api/hmmm/tags.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import {
  defineComponent,
  toRefs,
  reactive,
  getCurrentInstance
}
  from 'vue'
export default defineComponent({
  components: {},
  props: {
    enPeople: {
      type: Array,
      required: true
    }
  },
  setup (props, { emit }) {
    const state = reactive({
      formData: {
        subject: '',
        second: '',
        tags: '',
        keyWords: '',
        questionsType: '',
        difficulty: '',
        direction: '',
        enterPeople: '',
        topicRemarks: '',
        simpleCall: '',
        city: '',
        lastCity: ''
      },
      rules: {
        subject: [{
          required: true,
          message: '请选择学科',
          trigger: 'change'
        }],
        second: [{
          required: true,
          message: '请选择二级目录',
          trigger: 'change'
        }],
        tags: [{
          required: true,
          message: '请选择标签',
          trigger: 'change'
        }],
        keyWords: [{
          required: true,
          message: '请输入关键字',
          trigger: 'blur'
        }],
        questionsType: [{
          required: true,
          message: '请选择试题类型',
          trigger: 'change'
        }],
        difficulty: [{
          required: true,
          message: '请选择难度',
          trigger: 'change'
        }],
        direction: [{
          required: true,
          message: '请选择方向',
          trigger: 'change'
        }],
        enterPeople: [{
          required: true,
          message: '请选择录入人',
          trigger: 'change'
        }],
        topicRemarks: [{
          required: true,
          message: '请输入题目备注',
          trigger: 'blur'
        }],
        simpleCall: [{
          required: true,
          message: '请输入企业简称',
          trigger: 'blur'
        }],
        city: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        field131: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }]
      },
      subjectOptions: [],
      secondOptions: [],
      tagsOptions: [],
      questionsTypeOptions: [{
        label: '单选',
        value: 1
      }, {
        label: '多选',
        value: 2
      }, {
        label: '简单',
        value: 3
      }],
      difficultyOptions: [{
        label: '简单',
        value: 1
      }, {
        label: '一般',
        value: 2
      }, {
        label: '困难',
        value: 3
      }],
      directionOptions: [{
        label: 'o2o',
        value: 1
      }, {
        label: '外包服务',
        value: 2
      }, {
        label: '企业服务',
        value: 3
      }, {
        label: '互联网金融',
        value: 4
      }, {
        label: '企业咨询',
        value: 5
      }, {
        label: '互联网',
        value: 6
      }, {
        label: '电子商务',
        value: 7
      }, {
        label: '其他',
        value: 8
      }],
      enterPeopleOptions: [],
      cityOptions: [],
      lastCityOptions: []
    })
    // 获取学科列表
    async function getSubjectList () {
      const res = await simple()
      // console.log(res)
      state.subjectOptions = res.data.map(t => t)
    }
    getSubjectList()
    // 获取二级目录列表,获取标签列表
    async function subjectChange (val) {
      const { data: res1 } = await simpleSecond(val)
      state.secondOptions = res1.map(t => t)
      const { data: res } = await simpleTags(val)
      state.tagsOptions = res.map(t => t)
    }
    // 获取录入人列表
    async function getPeopleList () {
      const { data: res } = await choice()
      // console.log(res)
      state.enterPeopleOptions = res.items.map(t => t.creator)
    }
    getPeopleList()
    // 城市及其下级
    state.cityOptions = provinces()
    function cityChange (val) {
      state.lastCityOptions = citys(val)
    }
    // 表单验证
    const instance = getCurrentInstance()
    const submitForm = () => {
      emit('search', state.formData)
      // instance.ctx.$refs.vForm.validate(valid => {
      //   // if (!valid) return
      // })
    }
    const resetForm = () => {
      instance.ctx.$refs.form.resetFields()
    }
    return {
      ...toRefs(state),
      submitForm,
      resetForm,
      subjectChange,
      cityChange
    }
  }
})

</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

// div.tab-container {}

.label-left-align :deep(.el-form-item__label) {
  text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
  text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
  text-align: right;
}

// .custom-label {}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}
</style>
